import React, { Component } from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { List, SwipeAction, Icon, Tools, Result} from "weaver-mobile";
import { withRouter } from 'react-router-dom';
import { forwardViewForm } from '../../util/common';


const Item = List.Item;
const getLabel = Tools.getLabel;
@inject("wfworkflowAddStore")
@withRouter
@observer
class ComWorkFlow extends Component {
    componentWillMount() {

    }
    getImg = (num) => {
        let arr_color = ['56B1F7', '77D196', 'F2AF4E', 'EC7F5A', '6FD0E5'];
        return <div className="wf-add-numIcon" style={{ background: "#" + arr_color[num % arr_color.length] }}>{num + 1}</div>
    }
    /* 
     *更改数据库关于我的收藏的数据
     */
    doColl = (type, typeid, wfid) => {
        const { wfworkflowAddStore } = this.props;
        wfworkflowAddStore.doAddWfToColl(type, typeid, wfid)
    }

    /**
        * 跳转到新建流程
        */
    doLinktoAddRequest(ev, item) {
        const { wfworkflowAddStore } = this.props;
        const { resultDatas, setSS, openByDefaultBrowser } = wfworkflowAddStore;
        let urlParams = { ...resultDatas, ...{ iscreate: 1, workflowid: item.id } };
        if(openByDefaultBrowser==1){
            urlParams.openByDefaultBrowser=openByDefaultBrowser;
        }
        setSS();
        forwardViewForm(urlParams, "/add");
    }
    getNoDataPage = () => {
        return (
            <div style={{ width: "100%", height: "100%" }} className="wf-add-NoData">
                <Result
                    img={<Icon type="no-data" size="lg" />}
                    message={getLabel(83553, "暂无数据")}
                />
            </div>
        )
    }

    render() {
        let propsDatas = toJS(this.props.wfworkflowAddStore.datas);
        const { history, wfworkflowAddStore } = this.props;
        const { browserStore } = wfworkflowAddStore;
        let datas = [];
        propsDatas.map(items => {
            items.wfbeans.map(item => {
                item.usedtodo === "1" &&
                    datas.push(item)
                return datas;
            })
            return datas;
        })
        if (datas.length > 0) {
        } else {
            // return (<div style={{ width: "100%" }} className="wf-add-Com">
            //     <div className="wf-add-NoData" >{getLabel(83553, "暂无数据")}</div>
            // </div>)
            return (this.getNoDataPage())
        }
        datas.sort(function (a, b) {
            return a.usedtodoorder - b.usedtodoorder;
        })


        return (<div style={{ width: "100%" }} className="wf-add-Com">
            <List>
                {datas.map((item, index) => {
                    let isShowImport = false;
                    let isShowSelectcreatorIdentity = false;
                    if (item.isImportWf === "1") {
                        isShowImport = true;
                    }
                    if (item.belongtoUsers.length > 0 || item.beagenters.length > 0) {
                        isShowSelectcreatorIdentity = true;
                    }
                    return (
                        <SwipeAction
                            key={index}
                            style={{ backgroundColor: 'gray' }}
                            autoClose
                            right={[
                                {
                                    text: parseInt(item.wfColl, 10) === 1 ? getLabel(129753, '取消收藏') : getLabel(22255, '添加收藏'),
                                    onPress: () => {//点击取消收藏或者添加收藏，更改数据库数据
                                        this.doColl(parseInt(item.wfColl, 10) === 1 ? "0" : "1", item.typeId, item.id);
                                    },
                                    className: parseInt(item.wfColl, 10) === 1 ? "quxiao" : "tianjia",
                                },
                            ]}
                        >
                            <Item
                                thumb={this.getImg(index)}
                                extra={
                                    (isShowSelectcreatorIdentity || isShowImport) ?
                                        <div className="wrap-extra-icon-com">
                                            <div className="extra-icon-com" style={{ display: ((isShowImport || isShowSelectcreatorIdentity) && !(isShowImport && isShowSelectcreatorIdentity))  ? "block" : "none" }}>{/*占位div */} </div>
                                            <div className="extra-icon-com"
                                                style={{ display: isShowImport ? "block" : "none" }}
                                                onClick={() => {
                                                    const { setState } = this.props.wfworkflowAddStore;
                                                    setState({ selectData: item });
                                                    history.push(browserStore.path);
                                                }}
                                            >
                                                {isShowImport && <Icon type="download" size="xs"></Icon>}
                                            </div>
                                            <div className="extra-icon-com"
                                                style={{ display: isShowSelectcreatorIdentity ? "block" : "none", }}
                                                onClick={() => {
                                                    const { setState } = this.props.wfworkflowAddStore;
                                                    setState({ selectData: item });
                                                    this.props.history.push({
                                                        pathname: "/creatorIdentity"
                                                    })
                                                }}>
                                                {isShowSelectcreatorIdentity && <Icon type="switch-o" size="xs"></Icon>}
                                            </div>
                                        </div> : undefined
                                }

                            >
                                <div className="item-name"
                                    onClick={(e) => {
                                        this.doLinktoAddRequest(e, item);
                                    }}>
                                    {item.name}
                                </div>
                            </Item>
                        </SwipeAction>
                    )
                }
                )}
            </List>

        </div>)
    }
}
export default ComWorkFlow;